<template>
  <div class="album">
    <div class="album-bg"></div>
    <div class="album-body">
      <div class="album-slide">
        <div class="album-img">
          <img :src="s_list.picture" alt="">
        </div>
        <div class="album-info">
          <h2>简介：</h2>
          <span>
            {{s_list.introduce}}
          </span>
        </div>
      </div>
      <div class="album-content">
        <div class="album-title">
          <p>{{s_list.title}}</p>
        </div>
        <div class="favorite">
          <v-btn

            :class="fav ? 'red--text' : ''"
            icon
            @click="collection()"
            large
          >
            <svg-icon :icon-class="fav?'xin_red':'xin'" size="30"></svg-icon>
          </v-btn>
        </div>
        <!--评分-->
        <div class="album-score">
          <div>
            <h3>歌单评分：</h3>
            <div class="text-xs-center">
              <v-rating v-model="value5"
                        background-color="orange lighten-3"
                        color="orange"
                        readonly
                        half-increments></v-rating>
            </div>
          </div>
          <span>{{value5}}</span>
          <div>
            <h3>评价：</h3>
            <div class="text-xs-center" @click="pushValue()">
              <v-rating v-model="value3"></v-rating>
            </div>
          </div>

        </div>
        <!--歌曲-->
        <div class="songs-body">
          <album-content :songList="listSongOfSongs">
            <template slot="title">歌单</template>
          </album-content>
          <comment :s_id=songListId :type="1"></comment>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {mixin} from '../mixins'
import { mapGetters } from 'vuex'
import AlbumContent from '../components/AlbumContent'
import Comment from '../components/Comment'

    /*
    * 1.他获取歌曲列表的请求过程是：
    * =》点击之后获得的歌单的索引，获取歌单的信息，
    * =》向后端发送请求获得歌曲歌单的中间表，然后在前端遍历出来出该歌单对应的歌曲id
    * =》根据歌曲Id一个一个去查歌曲信息
    * =》然后一个一个push进歌曲列表  songLists: [],
    * =》添加进songLists之后就，存进key为"listOfSongs"的session storge里面
    *
    * 2.获取评分的请求过程是:
    * =》根据歌单id直接去查评分
    *
    * 3.评价的请求逻辑：
    * =》先判断是否登录,如果还没登录则提示请登录
    * =》向后台传歌单id，用户id，和评分score这三个参数；
    * =》返回的结果是"1"则评价成功，否则是已评价过了
    *
    * 都是在mounted函数的
    * */
export default {
  name: 'song-list-album-page',
  data () {
    return {
      fav: false,
      listSongOfSongs: [],
      s_list: {},      //歌单对象
      count: 0,
      songListId: '', // 歌单ID
      value3: 0,
      value5: 0
    }
  },
  components: {
    AlbumContent,
    Comment
  },
  computed: {
    ...mapGetters([
      'loginIn',
      'songsList', // 歌单列表
      'index', // 列表中的序号
      'listOfSongs', // 存放的音乐
      'index',
      'userId',
      'avator',
      'songslistComment'
    ])
  },
  created () {
    this.songListId = this.$route.params.id // 给歌单ID赋值
    this.getScore()
  },
  mounted: function () {
    // 获取当前歌单信息
    this.s_list = this.songsList[this.index]
    console.log("歌单的信息")
    console.log(this.s_list)
    // 获取歌单里面的歌曲ID
    this.getSongs()
    // this.getRank(this.s_list.id)   先注释
  },
  mixins: [mixin],
  methods: {
    findIsCollect () {
      axios.get(this.$store.state.HOST+"/collect/iscollect",{
        params: {
          userId: this.userId,
          id: this.s_list.id,
          type: 1
        }
      }).then(resp=>{
        if (resp.data === 1) {
          this.fav = true
        }else {
          this.fav = false
        }
      })
    },
    // 收藏
    collection () {
      if (this.loginIn) {
        if (this.s_list.id) {
          const params = this.$qs.stringify({
            userId: this.userId,
            sid: '',
            lid: this.s_list.id,
            type: 1
          })
          if (this.fav) {
            axios.post(this.$store.state.HOST + '/collect/cancelcollect', params)
              .then(() => {
                this.fav = false
              })
              .catch(failResponse => {})
          } else {

            axios.post(this.$store.state.HOST + '/collect/save', params)
              .then(() => {
                this.$notify({
                  title: '收藏成功',
                  type: 'success'
                })

                this.fav = true
              })
              .catch(failResponse => {})
          }

        }
      } else {
        this.$notify({
          title: '请先登录',
          type: 'warning'
        })
      }
    },
    // 收集歌单里面的歌曲
    getSongs () {
      // 获取歌单的所有歌曲
      axios.get(this.$store.state.HOST + '/songlist/list/song', {
        params: {
          id: this.s_list.id     // 歌单id（根据歌单id查找歌曲）
        }})
        .then(resp=> {
          this.listSongOfSongs = resp.data
          console.log('------歌曲------')
          console.log(this.listSongOfSongs)
          this.$store.commit('setListOfSongs', this.listSongOfSongs)
          window.sessionStorage.setItem('listOfSongs', JSON.stringify(this.listSongOfSongs))
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 获取评分
    getScore () {
      axios.get(this.$store.state.HOST + '/score/getScore?songlistId=' + this.songListId)
        .then(resp =>{
          this.value5 = resp.data

        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 提交评分
    pushValue () {
      if (this.loginIn) {
        const params = this.$qs.stringify({
          songlistId: this.songListId,
          userId: this.userId,
          score: this.value3
        })
        axios.post(this.$store.state.HOST + '/score/addScore', params)
          .then(resp => {
              this.$notify({
                title: '评分成功',
                type: 'success'
              })
            this.getScore()
          })
          .catch(failResponse => {
            this.$notify({
              title: '您已评价过啦',
              type: 'warning'
            })
            this.value3 = 0
          })
      } else {
        this.value3 = null
        this.$notify({
          title: '请先登录',
          type: 'warning'
        })
      }
    }
  },
  watch: {
    s_list: {
      deep: true,
      handler() {
        if (this.userId) {
          this.findIsCollect()
        }else {
          this.fav = false
        }
      }
    },
  }
}
</script>

<style scoped>
  .favorite {
    position: relative;
    left: 85%;
  }
  /*歌单背景*/
  .album-bg {
    width: 100%;
    height: 200px;
    background-color: #93d2f8;
  }
  .album-body {
    width: 100%;
    display: inline-block;
  }
  /*歌单左侧*/
  .album-slide {
    float: left;
    width: 400px;
  }
  /*歌单图像*/
  .album-img {
    height: 300px;
    width: 300px;
    display: inline-block;
    position: relative;
    top:-100px;
    left: 50px;
    border-radius: 10%;
    overflow: hidden;
    border: 5px solid white;
  }
  .album-img img {
    width: 100%;
  }
  /*歌单信息*/
  .album-info {
    font-size: 20px;
    font-weight: 500;
    margin-top: -80px;
    padding: 30px 50px;
  }
  .album-info > span {
    color: rgba(0, 0, 0, 0.5);
  }
  /*歌单内容*/
  .album-content{
    margin-left: 300px;
    padding: 40px 100px;
  }
  /*歌单题目*/
  .album-title {
    font-size: 30px;
    font-weight: 600;
  }
  /*歌单打分*/
  .album-score {
    display: flex;
    align-items: center;
    margin: 50px;
  }
  .album-score > div {
    margin-left: 100px;
  }
  .album-score > span{
    font-size: 60px;
  }
  .album-score h3 {
    margin: 10px 0;
  }
  /*歌曲列表*/
  .songs-body {
    background-color: white;
    border-radius: 12px;
    padding: 0 40px 50px 40px;
    min-width: 700px;
  }

</style>
